<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="/static/js/vue.min.js"></script>
    <script src="/static/js/jquery-3.3.1.min.js"></script>
    <title>当日接警-案件情况</title>
    <link rel="stylesheet" href="/static/css/single.css">
</head>
<body>
    <div id="container"  >
        <div class="draggable">
            <table class="tables ">
                <tr>
                    <td id = "first-title" colspan="2" >今日接警情况</td>
                </tr>
                <tr>
                    <td class="td-left">今日接警总量</td>
                    <td>{{ jjqk.jjTotal }} &nbsp;起</td>
                </tr>
                <tr>
                    <td class="td-left">有效警情</td>
                    <td>{{ jjqk.validTotal }} &nbsp;起</td>
                </tr>
            </table>
        </div>
        <div></div>
        <div class="draggable">
            <table class="tables ">
                <tr>
                    <td id="second-title" colspan="2" >今日案件情况</td>
                </tr>
                <tr>
                    <td  class="td-left">刑事案件</td>
                    <td>{{ ajqk.xsajTotal }} &nbsp;起</td>
                </tr>
                <tr>
                    <td class="td-left">治安案件</td>
                    <td>{{ ajqk.zhianTotal }}&nbsp;起</td>
                </tr>
                <tr>
                    <td class="td-left">交通事件</td>
                    <td>{{ ajqk.jiaotongTotal}}&nbsp;起</td>
                </tr>
                <tr>
                    <td class="td-left">群众求助</td>
                    <td>{{ ajqk.qunzhongTotal }}&nbsp;起</td>
                </tr>
                <tr>
                    <td class="td-left">举报投诉</td>
                    <td>{{ ajqk.jubaoTotal }}&nbsp;起</td>
                </tr>
            </table>
        </div>

     </div>
    <script type="text/javascript">
        var top = new Vue({
            el : '#container',
            data : function() {
                var _ = this;
                return {
                    intervalId: 0, /** 延时函数id, 用于销毁 */
                    jjqk: {}, /** 接警情况 */
                    ajqk: {}, /** 案件情况 */
                    delay: 30000, /** 默认刷新频率 */
                }
            },
            created: function () {
                this.fetchData();
                var _ = this;
                this.intervalId = setInterval(function() {
                    _.fetchData();
                }, 5000 * 5);
            },
            methods: {
                fetchData: function() {
                    var _ = this;
                    var fetchUrl = '/single/getAjqk';
                    $.getJSON(fetchUrl, function(response) {
                        console.log(response);
                        _.ajqk = response;
                        console.log(_.ajqk);
                    });
                    $.getJSON('/single/getJjqk', function(response) {
                        _.jjqk = response;
                        console.log(response);
                    });
                },
                fetchDelay: function() {
                    var _ = this;
                    $.get('/single/getDelay', function(response) {
                        if(response.data != null && response != '' || response != undefined) {
                            _.delay = response;
                        }
                    });
                }

            },

            beforeDestroy: function() {
                clearInterval(this.intervalId)
            }
        });
    </script>
    <script src="/static/js/dragScript.js"></script>


</body>
</html>